<template>
	<view class="home" style="background: url('https://app.gluz.com.cn/uniappAssets/static/images/customer/top.png') no-repeat; background-size: 100% 100%;">
		
		<view class="userinfo">
			<view class="avatar">
				<image :src='IMAGE_URL+userinfo.avatar' style="width: 100rpx;height:100rpx;border-radius: 100rpx;"></image>
			</view>
			<view class="username">
				<view v-if="lang=='zh'" style="font-size: 18px;">{{userinfo.username}}</view>
				<view v-if="lang!='zh'" style="font-size: 18px;">{{userinfo.username_ru}}</view>
				
				<view>{{$t('欢迎使用GLUZ平台')}}</view>
			</view>
		</view>
		
		<view class="middle" style="margin-top: 0px;padding-top: 0px;">
			<view style="width: 44%;margin-left: 2.5%;position: relative;">
				<image :src='serverImageUrl("/static/images/customer/wdbc.png")' mode="widthFix" style="width: 100%;"></image>
				<view style="position: absolute; top: 10px; left: 15px;color: #fff;">{{$t('我的报酬')}}</view>
			</view>
			<view style="width: 44%;margin-left: 7%;position: relative;">
				<image :src='serverImageUrl("/static/images/customer/wdjl.png")' mode="widthFix" style="width: 100%;"></image>
				<view style="position: absolute; top: 10px; left: 15px;color: #fff;">{{$t('翻译记录')}}</view>
			</view>
		</view>
		
		<view class="lishi">
			<view><image style="padding-top: 10px;" class="zhuanhuan_img" mode="widthFix" :src='serverImageUrl("/static/images/customer/jilu.png")' alt="" /></view>
			<view style="color: white;">{{$t('任务中心')}}</view>
		</view>
		<view class="lang_bz">
			<view class="lang_bz_l">
				<view style="color: #005EAC;">语言帮助</view>
				<view class="lang_bz_mobile">拨打</view>
			</view>
			<view class="lang_bz_b">
				<view style="color: #9E9E9E;font-size: 24rpx;">发布时间:2024年10月29日 9:30:30</view>
				<view style="color: #FF7102;font-size: 28rpx;margin-top: 40rpx;">距离任务截至还有: 29分59秒</view>
				<view style="color: #1D1D1D;font-size: 24rpx;margin-top: 20rpx;">语言种类:中文-俄语</view>
				<view class="item_utils_styles">
					<view style="min-width: 115rpx;">帮助需求:</view>
					<view>我需要买票，你们可以帮我翻译一下吗？</view>
				</view>
				<view class="lang_bz_bt">
					<view class="lang_bz_but">任务结束</view>
					<view class="lang_bz_but1">即时沟通</view>
				</view>
			</view>
		</view>
		<view  style="width: 100%;overflow-x: hidden;padding-left:30rpx;padding-right:30rpx; padding-top: 30rpx; padding-bottom: 30rpx;">
			<scroll-view v-if="is_master==1" @scrolltolower="scrolltolowers()" :scroll-y="true" class="my-content" lower-threshold="50" style="height: 80vh; overflow-x: hidden;">
				<u-empty v-if="!lists||lists.length==0" ></u-empty>
				<div class="item" v-for="(item,index) in lists">
					<div class="between">
						<view style="font-size: 24rpx;">{{$t('视频会议')}}</view>
						<view class="between_ql">{{$t('发起群聊')}}</view>
					</div>
					<view class="item_bottom">
						<view style="font-size: 24rpx;">发布时间:2024年10月29日 9:30:30</view>
						<view style="margin-top: 40rpx;font-size: 28rpx;color: #FF7102;">距离会议开始还有: 29分59秒</view>
						<view style="font-size: 24rpx;margin-top: 20rpx;">语言种类:中文-俄语</view>
						<view class="item_utils_style">会议类型:商务会议</view>
						<view class="item_utils_style">专业方向:经济学</view>
						<view class="item_utils_style">会议开始时间:2024/10/29 10:00</view>
						<view class="item_utils_style">预计会议时长:30分钟</view>
						<view class="item_utils_styles">
							<view style="width: 135rpx;">会议需求:</view>
							<view>我们需要一个懂市场经济并且懂俄语的专业人士 帮助我们。</view>
						</view>
						
						<view class="item_dis">
							<view class="item_block1">任务结束</view>
							<view class="item_block2">拨打</view>
							<view class="item_block3">即时沟通</view>
						</view>
					</view>
				</div>
				
				<view style="height: 150px;"></view>
			</scroll-view>
			
			
		</view>
		


	</view>
</template>

<script>
	import { HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL,IMAGE_PIC } from "@/config/app"
	import { createC2CConversation } from "@/common/public";
	export default {
		data() {
			return {
				lists: [],
				flag:false,
				is_master:0,
				tab_select:1,
				page:1,
				count:0,
				lang:getApp().globalData.lang,
				IMAGE_URL,
				userinfo:{}
			}
		},
		onLoad() {
			this.is_master = uni.getStorageSync('userInfoFull').user.is_master
			if(this.is_master==1){
				this.Liuyan_lists();
				this.weidu_count();
				
			}else{
				this.my_Liuyan();
				this.tab_select = 2;
			}
			this.userinfo = uni.getStorageSync('userInfoFull').user
			console.log(this.userinfo)
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t("留言板")
			})
		},
		methods: {
			Liuyan_lists() {
				this.$u.api.basic.getLiuyan({
					nowlang: getApp().globalData.lang,
					page:this.page
				}).then(res => {
					console.log(res)
					if (this.page == 1) {
						this.lists = res
					} else {
						var list1 = res
						if (res) {
							this.lists = [...this.lists, ...list1]
						}
					}
				})
			},
			my_Liuyan(){
				this.$u.api.basic.my_Liuyan({
					nowlang: getApp().globalData.lang,
					user_id:uni.getStorageSync('user_id'),
					page:this.page
				}).then(res => {
					console.log(res)
					if (this.page == 1) {
						this.lists = res
					} else {
						var list1 = res
						if (res) {
							this.lists = [...this.lists, ...list1]
						}
					}
				})
			},
			yishouli(){
				var that = this
				this.$u.api.basic.yishouli({
					nowlang: getApp().globalData.lang,
					user_id:uni.getStorageSync('user_id'),
					page:this.page
				}).then(res => {
					console.log(res)
					if (that.page == 1) {
						that.lists = res
					} else {
						var list1 = res
						if (res) {
							that.lists = [...that.lists, ...list1]
						}
					}
				})
			},
			tab_action(i){
				this.tab_select = i
				this.lists = []
				this.page = 1
				if(i==1){
					this.Liuyan_lists()
				}else if(i==2){
					this.my_Liuyan()
				}else{
					this.yishouli()
				}
			},
			scrolltolowers(e) {
				if (this.lists.length === 0) {
					return
				}
				this.page++
				if(this.tab_select == 1){
					this.Liuyan_lists()
				}else if(this.tab_select==2){
					this.my_Liuyan()
				}else{
					this.yishouli()
				}
			},
			chakan(id,mobile,index){
				var that = this
				this.$u.api.basic.query_Liuyan({
					nowlang: getApp().globalData.lang,
					user_id:uni.getStorageSync('user_id'),
					id:id,
				}).then(res => {
					if(res==1){
						createC2CConversation(mobile,this)
					}else{
						uni.showToast({
							title:that.$t('留言已被处理')
						})
					}
					
					setTimeout(function(){
						that.lists.splice(index,1)
					},2000)
				})
			},
			shuaxin(){
				this.lists = []
				this.page = 1
				if(this.tab_select==1){
					this.Liuyan_lists()
				}else if(this.tab_select==2){
					this.my_Liuyan()
				}else{
					this.yishouli()
				}
			},
			weidu_count(){
				var that = this
				setInterval(function(){
					that.$u.api.basic.weidu_count().then(res => {
						console.log(res)
						that.count = res
						that.flag = true
					})
				},5000)
			},
			tiaozhuan(id,mobile,index){
				createC2CConversation(mobile,this)
			}
		}

	}
</script>

<style lang="less">
	.lang_bz_mobile{
		width: 133rpx;
		height: 48rpx;
		border-radius: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 22rpx;
		color: #005EAC;
		background-color: #FFFFFF;
	}
	.lang_bz_but{
		width: 305rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #FF5D5D;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		
	}
	.lang_bz_but1{
		width: 305rpx;
		height: 60rpx;
		border-radius: 60rpx;
		
background: #06C36E;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		
	}
	.lang_bz_bt{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 48rpx;
	}
	.lang_bz_b{
		width: 100%;
		min-height: 341rpx;
		padding: 30rpx 30rpx 23rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 32rpx;
	}
	.lang_bz_l{
		width: 100%;
		height: 72rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}
	.lang_bz{
		border-radius: 32rpx;
		margin: 0 auto;
		width: 690rpx;
		min-height: 413rpx;
		background: linear-gradient(90deg, #CCD6FF -2%, #4A70FC 105%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.between_ql{
		width: 133rpx;
		height: 48rpx;
		border-radius: 48px;
		font-size: 22rpx;
		background: #FFFFFF;
		text-align: center;
		line-height: 48rpx;
		color: #745343;
	}
	.item_block1{
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #FF5D5D;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
	.item_block2{
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #4988FD;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
	.item_block3{
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #06C36E;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
	.item_dis{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 44rpx;
	}
	.item_utils_styles{
		width: 100%;
		display: flex;
		color: #9E9E9E;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.item_utils_style{
		color: #9E9E9E;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.item_bottom{
		width: 100%;
		min-height: 555rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx;
	}
	page {
		background-color: #f5f5f5;
	}
	
	.home{
		width: 100%; position: relative; height: 50vh;
	}
	.userinfo{
		position: relative; display: flex; padding-top: 40rpx; margin-left: 5%;width: 100%; height: 180rpx;
	}
	.middle{
		width: 96%; position: relative; display: flex; padding-top: 40rpx; margin-left: 2%;
	}
	.username{
		color: #fff; line-height: 50rpx; margin-left: 15px;
	}
	.item {
		background: linear-gradient(91deg, #FCF9E8 0%, #F2C376 95%);
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.between {
		width: 100%;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.icon {
		border-radius: 50%;
		width: 50rpx;
		height: 50rpx;
		background-color: #ddd;
		margin-right: 8rpx;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.nickname {
		font-size: 28rpx;
		color: #3d3d3d;
		font-weight: bold;
	}

	.btn {
		background-color: #000;
		color: #fff;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15rpx 25rpx;
		border-radius: 5rpx;
	}

	.info {
		padding-bottom: 15rpx;
		margin-bottom: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.message {
		padding-bottom: 24rpx;
		font-size: 26rpx;
		border-bottom: 1rpx solid #f5f5f5;
		color: #3d3d3d;
		margin-bottom: 15rpx;
		line-height: 40rpx;
	}

	.flag {
		image {
			width: 50rpx;
		}
	}

	.time {
		color: #666;
		font-size: 24rpx;
	}

	.time-text {
		margin-left: 8rpx;
	}

	.h1 {
		color: #3d3d3d;
		font-weight: bold;
		font-size: 22rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 8rpx;
		background: linear-gradient(111deg, #D7F09D 0%, #F8FCF1 86%), #D8D8D8;
		border-radius: 20rpx 0 20rpx 0;
	}
	
	.tab{
		width: 100%; height: 100rpx; display: flex;
	}
	
	.tab_view{
		width: 50%; text-align: center; line-height: 100rpx; color: #999999;font-size: 16px;
	}
	.tab_on{
		font-size: 16px;
		color: #3d3d3d !important;
		font-weight: bold;
	}
	.tab_on1{
		border-bottom:  1px #000 solid;
	}
	
	.lishi{
		width: 94%; margin-left: 3%; margin-top: 20rpx;  display: flex; height: 50px; line-height: 50px; font-size: 18px;
	}
	.zhuanhuan_img{
		width: 20px;height: 20px; margin: 5px;
	}
</style>